<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联栗炮固定式求解器</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            padding: 20px;
        }
        .calculator-container {
            max-width: 500px;
            margin: 0 auto;
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .equation-display {
            font-family: 'Courier New', monospace;
            background: #f1f1f1;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .btn-solve {
            background-color: #4a6baf;
            border: none;
            width: 100%;
            padding: 10px;
            font-weight: bold;
        }
        .result-box {
            margin-top: 20px;
            padding: 15px;
            background: #e8f4ff;
            border-radius: 5px;
            display: none;
        }
        .loading-spinner {
            display: none;
            margin: 10px auto;
        }
    </style>
</head>
<body>
<div class="calculator-container">
    <h2 class="text-center mb-4">联栗炮固定式求解器</h2>

    <div class="equation-display text-center">
        <p>2^超量 + 融合 = 场上+手牌总数</p>
        <p>超量 + 融合 = 怪兽等级/阶级</p>
        <p>无法选择连接怪兽</p>
    </div>

    <div class="mb-3">
        <label for="inputA" class="form-label">场上+手牌数量：</label>
        <input type="number" class="form-control" id="inputA" placeholder="例如：5" step="any">
    </div>

    <div class="mb-3">
        <label for="inputB" class="form-label">怪兽星级/阶级：</label>
        <input type="number" class="form-control" id="inputB" placeholder="例如：3" step="any">
    </div>

    <button id="solveBtn" class="btn btn-primary btn-solve" onclick="solveEquation()">
        求解
    </button>

    <div class="text-center">
        <div class="spinner-border loading-spinner text-primary" role="status">
            <span class="visually-hidden">加载中...</span>
        </div>
    </div>

    <div id="resultBox" class="result-box">
        <h5>解：</h5>
        <p>超量怪兽阶级 = <span id="resultX">0</span></p>
        <p>融合怪兽星级 = <span id="resultY">0</span></p>
    </div>

    <div id="errorBox" class="alert alert-danger mt-3" style="display: none;"></div>
</div>

<script>
        function solveEquation() {
            // 获取输入值
            const a = parseFloat(document.getElementById('inputA').value);
            const b = parseFloat(document.getElementById('inputB').value);

            // 验证输入
            if (isNaN(a) || isNaN(b)) {
                showError("请输入有效的数字！");
                return;
            }

            // 显示加载状态
            document.querySelector('.loading-spinner').style.display = 'block';
            document.getElementById('solveBtn').disabled = true;

            // 隐藏之前的结果和错误
            document.getElementById('resultBox').style.display = 'none';
            document.getElementById('errorBox').style.display = 'none';

            // 发送POST请求
            fetch('/api/equation/solve', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ a, b })
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error('方程的解为负数或0，视为无实际意义解');
                    });
                }
                return response.json();
            })
            .then(data => {
                // 显示结果
                document.getElementById('resultX').textContent = data.x.toFixed(2);
                document.getElementById('resultY').textContent = data.y.toFixed(2);
                document.getElementById('resultBox').style.display = 'block';
            })
            .catch(error => {
                showError(error.message.includes("负数") ? "结果包含负数或0，无实际意义解" : error.message);
            })
            .finally(() => {
                // 重置按钮和加载状态
                document.querySelector('.loading-spinner').style.display = 'none';
                document.getElementById('solveBtn').disabled = false;
            });
        }

        function showError(message) {
            const errorBox = document.getElementById('errorBox');
            errorBox.textContent = message;
            errorBox.style.display = 'block';
        }

        // 支持按Enter键触发计算
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('inputA').addEventListener('keypress', (e) => {
                if (e.key === 'Enter') solveEquation();
            });
            document.getElementById('inputB').addEventListener('keypress', (e) => {
                if (e.key === 'Enter') solveEquation();
            });
        });
    </script>
</body>
</html>